<template>
	<view>
		<uv-popup ref="popup" mode="left" :safeAreaInsetTop="true" :closeable="true">
			<view style="width: 600rpx;">
				<view class="rx_setting">
					<view class="rx_setting_userinfo">
						<view class="rx_setting_userinfo_left">
							<view class="rx_setting_userinfo_left_hi">Hi</view>
							<view class="rx_setting_userinfo_left_name">, {{ userinfo.name }}</view>
						</view>
						<view class="rx_setting_userinfo_right">医生</view>
					</view>
					
					<!-- 卡片 -->
					<view class="rx_setting_clinic">
						<view class="rx_setting_clinic_title">
							<view class="rx_setting_clinic_title_left">
								{{ userinfo.clinic.clinic }}
							</view>
							<view class="rx_setting_clinic_title_right" @click="integralUpClick">
								<uv-icon name="integral" size="28" color="#fffff0"></uv-icon>
							</view>
						</view>
						<view class="rx_setting_clinic_address">
							{{ userinfo.clinic.addressProvince }}{{ userinfo.clinic.addressCity }}{{ userinfo.clinic.addressCounty }}{{ userinfo.clinic.address }}
						</view>
						<view class="rx_setting_clinic_gap">
							<uv-gap height="3" bgColor="#fffff0" marginTop="20" marginBottom="10"></uv-gap>
						</view>
						<uv-cell-group :border="false">
							<uv-cell v-for="item, index in clinic_data" :key="index" :isLink="item.arrow_right_icon" rightIconStyle="color: #fffff0" customStyle="background-color: #2c9c3c" @click="clinicClick(index)">
								<!-- 自定义左侧标题 -->
								<template v-slot:title>
									<text style="color: #fffff0">{{ item.title }}</text>
								</template>
								<!-- 自定义右侧值 -->
								<template v-slot:value>
									<text style="color: #fffff0">{{ item.value }}</text>
								</template>
							</uv-cell>
						</uv-cell-group>
					</view>
					<!-- 卡片 -->
					
					<uv-cell-group :border="false">
						<uv-cell v-for="item, index in info_data" :key="index" :isLink="true" :cellStyle="{padding: '15px 0px'}" @click="infoClick(index)">
							<!-- 自定义左侧标题 -->
							<template v-slot:title>
								<uv-text :text="item.title"></uv-text>
							</template>
							<!-- 自定义左侧图标 -->
							<template v-slot:icon>
								<uv-icon size="35rpx" :name="item.icon"></uv-icon>
							</template>
						</uv-cell>
					</uv-cell-group>
				</view>
			</view>
		</uv-popup>
		
		<!-- 意见弹出框 -->
		<uv-modal ref="modal" title="提起意见" showCancelButton confirmColor="#2c9c3c" @confirm="confirm">
			<uv-textarea v-model="idea_value" count focus :maxlength="-1" height="150" border="bottom" placeholder="请简短输入意见, 开发者将极大程度满足需求."></uv-textarea>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		name:"RxMyPopup",
		data() {
			return {
				userinfo: {},
				clinic_data: [{
					title: '诊所二维码', value: '', arrow_right_icon: true
				},{
					title: '剩余可用积分', value: '未统计 分', arrow_right_icon: false
				},{
					title: '今日开单数量', value: '未统计 单', arrow_right_icon: false
				}],
				info_data: [{
					title: '使用说明', icon: 'empty-order'
				},{
					title: '意见', icon: 'error-circle-fill'
				},{
					title: '设置', icon: 'setting-fill'
				}],
				idea_value: ''
			};
		},
		mounted() {
			this.userinfo = this.$store.state.userinfo
			uni.$on('RxMyPopupOpen', status => {
				if (status.status) {
					this.userinfo = status.userinfo
					this.$refs.popup.open()
				}
			})
			this.$api.get_clinic_statistics({ clinicId: this.userinfo.clinic._id }).then((res) => {
				this.clinic_data[1].value = `${res.data.integral} 分`
				this.clinic_data[2].value = `${res.data.today_statistics} 单`
			})
		},
		methods: {
			MyPopupOpen() {
				this.$refs.popup.open()
			},
			integralUpClick () {
				uni.navigateTo({
					url:'/pages/utils/integral_up/integral_up'
				})
			},
			clinicClick(inx) {
				if (inx === 0) {
					uni.navigateTo({
						url:'/pages/utils/QRCode/QRCode'
					})
				}
			},
			infoClick(inx) {
				if (inx === 0) {
					uni.navigateTo({
						url:'/pages/login/instructions'
					})
				} else if (inx === 1) {
					this.$refs.modal.open();
				} else if (inx === 2) {
					uni.navigateTo({
						url:'/pages/settings/settings'
					})
				}
			},
			// 格式化日期时间
			formatDate(timestamp) {  
			    const date = new Date(timestamp);  
			    const year = date.getFullYear();  
			    const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1  
			    const day = ('0' + date.getDate()).slice(-2);  
			    const hours = ('0' + date.getHours()).slice(-2);  
			    const minutes = ('0' + date.getMinutes()).slice(-2);  
			    return `${year}-${month}-${day} ${hours}:${minutes}`;  
			},
			confirm() {
				uni.showLoading()
				const submit_data = { 
					data: this.idea_value, 
					clinic: this.userinfo.clinic.clinic,
					name: this.userinfo.name,
					mobile: this.userinfo.mobile,
					address: `${this.userinfo.clinic.addressProvince}${this.userinfo.clinic.addressCity}${this.userinfo.clinic.addressCounty}${this.userinfo.clinic.address}`,
					date: this.formatDate(Number(new Date()))
				}
				this.$api.submit_idea(submit_data).then((res) => {
					uni.showToast({
						title: '提交成功',
						icon:'success'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.rx_setting {
		padding: 30rpx;
		
		.rx_setting_userinfo {
			display: flex;
			justify-content: space-between;
			
			.rx_setting_userinfo_left {
				display: flex;
				text-align: left;
				
				.rx_setting_userinfo_left_hi {
					font-size: 26px;
					font-weight: bold;
				}
				
				.rx_setting_userinfo_left_name {
					margin-top: 18rpx;
				}
			}
			
			.rx_setting_userinfo_right {
				text-align: right;
				margin-top: 12px;
				color: rgba(0, 0, 0, 0.4);
			}
		}
		
		.rx_setting_clinic {
			background-color: #2c9c3c;
			color: #fffff0;
			padding: 30rpx;
			margin: 30rpx 0rpx 20rpx 0rpx;
			border-radius: 20rpx;
			
			.rx_setting_clinic_title {
				display: flex;
				justify-content: space-between;
				
				.rx_setting_clinic_title_left {
					text-align: left;
					font-size: 18px;
					font-weight: bold;
					
				}
				
				.rx_setting_clinic_title_right {
					text-align: right;
					font-size: 30rpx;
					margin: auto 0rpx auto 0rpx;
				}
				
			}
				
			.rx_setting_clinic_address {
				font-size: 22rpx;
			}
			
			.rx_setting_clinic_gap {
				border-radius: 2000rpx;
				width: 80%;
			}
		}
		
		.rx_setting_clinic_image {
			display: flex;
			justify-content: space-between;
			margin: 60rpx 30rpx 30rpx 30rpx;
			
		}
		
		// .fixed-bottom-button {  
		//     position: fixed; /* 或者使用 position: absolute; 根据你的布局需要 */  
		//     bottom: 0; /* 使其固定在底部 */  
		//     left: 50%; /* 水平居中，需要配合 transform 使用 */  
		//     transform: translateX(-50%); /* 水平居中 */
		// 	margin-bottom: 30px;
		// }
		
	}
	
</style>